import React, { useState } from 'react';
import { useRequest } from 'ahooks';
import { Button, Card, DatePicker, Form, Input, Popconfirm, Row, Select, Space, Table, Typography } from 'antd';
import styles from '@/components/common/PateoTable/TableList.less';
import { fetchData } from '@/services/intelligent/trackingInfo';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { wrapper } from './styles.less';
import useOptions from './useOptios';
import RangeInputNumber from './RangeInputNumber';

export default () => {
  const [form] = Form.useForm();
  const { brank, series, type, modelStage, moduleName, onChange } = useOptions(form);

  const [pagination, setPagination] = useState({
    pageNo: 1,
    pageSize: 10,
  });

  const [expand, setExpand] = useState(false);
  const [formValues, setFormValues] = useState({});

  const { data, loading } = useRequest(() => fetchData(Object.assign(formValues, pagination)), {
    refreshDeps: [formValues, pagination],
  });

  const handleReset = () => {
    form.resetFields();
    setFormValues({});
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_text: any, _record: any, index: number) => index + 1,
    },
    {
      title: '品牌',
      dataIndex: 'brandName',
    },
    {
      title: '车型',
      dataIndex: 'vehicleStyle',
    },
    {
      title: '车系',
      dataIndex: 'vehicleSeries',
    },
    {
      title: 'VIN码',
      dataIndex: 'vin',
    },
    {
      title: '车型阶段',
      dataIndex: 'modelStage',
    },
    {
      title: '模块名称',
      dataIndex: 'moduleName',
    },
    {
      title: '打点编码',
      dataIndex: 'trackingCode',
    },
    {
      title: '主板信息',
      dataIndex: 'board',
    },
    {
      title: 'CPU占用率',
      dataIndex: 'cpuUsage',
    },
    {
      title: '内存使用',
      dataIndex: 'memoryUsage',
    },
    {
      title: '线程ID',
      dataIndex: 'threadsId'
    },
    {
      title: '函数',
      dataIndex: 'function',
    },
    {
      title: '行号',
      dataIndex: 'line',
    },
    {
      title: '参数',
      dataIndex: 'parameter',
      render: (text: string) => (
        <Typography.Text style={{ width: 180 }} ellipsis={{ tooltip: text }}>
          {text}
        </Typography.Text>
      ),
    },
    {
      title: '生成时间',
      dataIndex: 'trackTime',
    },
    {
      title: '文件名',
      dataIndex: 'fileName',
    },
    {
      title: '操作',
      dataIndex: 'fileUrl',
      fixed: 'right',
      render: (text: string) => (
        <Popconfirm title="是否确认下载" onConfirm={() => window.open(text, '_self')}>
          <a href={text}>下载</a>
        </Popconfirm>
      ),
    },
  ];

  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    total: data?.pagination?.total || 0,
    page: pagination.pageNo,
    pageSize: pagination.pageSize,
    showTotal: () => (
      <span>共&nbsp;{data?.pagination === undefined ? 0 : data.pagination.total}&nbsp;条</span>
    ),
  };

  return (
    <div>
      <Card bordered={false}>
        <Form className={wrapper} form={form} layout="inline" onFinish={setFormValues}>
          <Row wrap style={{ width: '100%', gap: 12 }}>
            <Form.Item label="品牌" name="brandName">
              <Select
                onChange={v => onChange('brandId', v)}
                showSearch
                allowClear
                placeholder="请选择品牌"
                style={{ width: 182 }}
              >
                {brank?.map((item: any) => (
                  <Select.Option key={item.brandCode} value={item.brandCode}>
                    {item.brandName}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item label="车型" name="vehicleStyle">
              <Select
                onChange={v => onChange('seriesId', v)}
                showSearch
                allowClear
                placeholder="请选择车型"
                style={{ width: 182 }}
              >
                {series?.map((item: any) => (
                  <Select.Option key={item.code} value={item.code}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item label="车系" name="vehicleSeries">
              <Select showSearch allowClear placeholder="请选择车系" style={{ width: 182 }}>
                {type?.map((item: any) => (
                  <Select.Option key={item.code} value={item.code}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            {expand && (
              <>
                <Form.Item label="VIN码" name="vin">
                  <Input placeholder="请输入VIN码" />
                </Form.Item>
                <Form.Item label="车型阶段" name="modelStage">
                  <Select showSearch allowClear placeholder="请选择车型阶段" style={{ width: 182 }}>
                    {modelStage?.list?.map((item: any) => (
                      <Select.Option value={item}>{item}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item label="模块名称" name="moduleName">
                  <Select showSearch allowClear placeholder="请选择车型阶段" style={{ width: 182 }}>
                    {moduleName?.list?.map((item: any) => (
                      <Select.Option value={item}>{item}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item label="CPU占用率" name="cpuUsage">
                  <RangeInputNumber />
                </Form.Item>
                <Form.Item label="内存使用率" name="memoryUsage">
                  <RangeInputNumber />
                </Form.Item>
                <Form.Item label="文件名" name="fileName">
                  <Input placeholder="文件名" />
                </Form.Item>
                <Form.Item label="时间" name="rangeTime">
                  <DatePicker.RangePicker showTime />
                </Form.Item>
                <Form.Item label="函数" name="function">
                  <Input placeholder="请输入函数" />
                </Form.Item>
              </>
            )}
            <Space size={12} style={{ marginLeft: 'auto' }}>
              <Button type="primary" htmlType="submit" size="small">
                查询
              </Button>
              <Button htmlType="button" onClick={handleReset} size="small">
                重置
              </Button>
              <a
                style={{ fontSize: 12 }}
                onClick={() => {
                  setExpand(!expand);
                }}
              >
                {expand ? <UpOutlined /> : <DownOutlined />}
                {expand ? '收起' : '展开'}
              </a>
            </Space>
          </Row>
        </Form>
      </Card>

      <Card className={styles.standardTable}>
        <Table
          style={{ marginTop: 12 }}
          size={'small'}
          loading={loading}
          rowKey={record => record.uuid}
          dataSource={data?.list}
          columns={columns}
          scroll={{ x: 'max-content' }}
          pagination={paginationProps}
          onChange={({ current, pageSize }) =>
            setPagination({ pageNo: current || 1, pageSize: pageSize || 10 })
          }
        />
      </Card>
    </div>
  );
};
